<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UI元素加载动画 - GSAP DrawSVG</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: #f5f7fa;
      font-family: 'Arial', sans-serif;
      flex-direction: column;
      padding: 20px;
    }

    .container {
      width: 100%;
      max-width: 500px;
    }

    .ui-element {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
      padding: 20px;
      position: relative;
      overflow: hidden;
    }

    .ui-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #334155;
    }

    /* 按钮加载动画 */
    .button-loader {
      width: 100%;
      height: 50px;
    }

    #button-outline {
      fill: none;
      stroke: #4f46e5;
      stroke-width: 2;
    }

    /* 输入框加载动画 */
    .input-loader {
      width: 100%;
      height: 60px;
    }

    #input-outline {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 1.5;
    }

    /* 卡片加载动画 */
    .card-loader {
      width: 100%;
      height: 120px;
    }

    #card-outline {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 1.5;
    }

    /* 进度条加载动画 */
    .progress-loader {
      width: 100%;
      height: 20px;
      margin-top: 10px;
    }

    #progress-track {
      fill: none;
      stroke: #e2e8f0;
      stroke-width: 8;
    }

    #progress-bar {
      fill: none;
      stroke: #10b981;
      stroke-width: 8;
      stroke-linecap: round;
    }

    /* 图标加载动画 */
    .icon-loader {
      width: 60px;
      height: 60px;
      margin: 0 auto;
    }

    #icon-path {
      fill: none;
      stroke: #f59e0b;
      stroke-width: 2;
    }

    .controls {
      margin-top: 30px;
      display: flex;
      gap: 10px;
    }

    button {
      padding: 10px 20px;
      background: #4f46e5;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.2s;
    }

    button:hover {
      background: #4338ca;
    }
  </style>
</head>
<body>
<div class="container">
  <h1>UI元素加载动画</h1>

  <!-- 按钮加载动画 -->
  <div class="ui-element">
    <div class="ui-title">按钮加载效果</div>
    <svg class="button-loader" viewBox="0 0 300 60">
      <rect id="button-outline" x="10" y="10" width="280" height="40" rx="5"/>
    </svg>
  </div>

  <!-- 输入框加载动画 -->
  <div class="ui-element">
    <div class="ui-title">输入框加载效果</div>
    <svg class="input-loader" viewBox="0 0 300 70">
      <rect id="input-outline" x="10" y="10" width="280" height="50" rx="5"/>
      <rect id="input-label" x="20" y="0" width="80" height="10" fill="#f8fafc"/>
    </svg>
  </div>

  <!-- 卡片加载动画 -->
  <div class="ui-element">
    <div class="ui-title">卡片加载效果</div>
    <svg class="card-loader" viewBox="0 0 300 130">
      <rect id="card-outline" x="10" y="10" width="280" height="110" rx="5"/>
      <rect id="card-image" x="20" y="20" width="80" height="60" fill="#f8fafc"/>
      <rect id="card-line1" x="120" y="25" width="160" height="10" fill="#f8fafc"/>
      <rect id="card-line2" x="120" y="45" width="120" height="8" fill="#f8fafc"/>
      <rect id="card-line3" x="120" y="65" width="80" height="8" fill="#f8fafc"/>
    </svg>
  </div>

  <!-- 进度条加载动画 -->
  <div class="ui-element">
    <div class="ui-title">进度条加载效果</div>
    <svg class="progress-loader" viewBox="0 0 300 30">
      <path id="progress-track" d="M10,15 L290,15"/>
      <path id="progress-bar" d="M10,15 L290,15"/>
    </svg>
  </div>

  <!-- 图标加载动画 -->
  <div class="ui-element">
    <div class="ui-title">图标加载效果</div>
    <svg class="icon-loader" viewBox="0 0 80 80">
      <path id="icon-path" d="M40,10 L50,30 L70,35 L55,50 L60,70 L40,60 L20,70 L25,50 L10,35 L30,30 Z"/>
    </svg>
  </div>
</div>

<div class="controls">
  <button id="play-btn">播放所有动画</button>
  <button id="reset-btn">重置动画</button>
</div>

<!-- 引入GSAP库和插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/DrawSVGPlugin.min.js"></script>

<script>
  // 注册插件
  gsap.registerPlugin(DrawSVGPlugin);

  // 创建主时间线
  const uiTimeline = gsap.timeline({paused: true});

  // 按钮动画
  uiTimeline
          .fromTo("#button-outline",
                  {drawSVG: "0% 0%"},
                  {drawSVG: "0% 100%", duration: 0.8, ease: "power2.out"})
          .to("#button-outline",
                  {fill: "rgba(79, 70, 229, 0.1)", duration: 0.3});

  // 输入框动画
  uiTimeline
          .fromTo("#input-outline",
                  {drawSVG: "0% 0%"},
                  {drawSVG: "0% 100%", duration: 0.8, ease: "power2.out"}, "-=0.5")
          .fromTo("#input-label",
                  {scaleX: 0, transformOrigin: "left center"},
                  {scaleX: 1, duration: 0.5, ease: "power2.out"}, "-=0.3");

  // 卡片动画
  uiTimeline
          .fromTo("#card-outline",
                  {drawSVG: "0% 0%"},
                  {drawSVG: "0% 100%", duration: 1, ease: "power2.out"}, "-=0.5")
          .from("#card-image",
                  {scaleY: 0, transformOrigin: "bottom center", duration: 0.5}, "-=0.5")
          .from("#card-line1",
                  {scaleX: 0, transformOrigin: "left center", duration: 0.4}, "-=0.4")
          .from("#card-line2",
                  {scaleX: 0, transformOrigin: "left center", duration: 0.4}, "-=0.3")
          .from("#card-line3",
                  {scaleX: 0, transformOrigin: "left center", duration: 0.4}, "-=0.3");

  // 进度条动画
  uiTimeline
          .fromTo("#progress-track",
                  {drawSVG: "0% 0%"},
                  {drawSVG: "0% 100%", duration: 0.5}, "-=0.5")
          .fromTo("#progress-bar",
                  {drawSVG: "0% 0%"},
                  {drawSVG: "0% 70%", duration: 1.5, ease: "power1.out"}, "-=0.3");

  // 图标动画
  uiTimeline
          .fromTo("#icon-path",
                  {drawSVG: "0% 0%"},
                  {drawSVG: "0% 100%", duration: 1.2, ease: "back.out"}, "-=0.5")
          .to("#icon-path",
                  {fill: "rgba(245, 158, 11, 0.2)", duration: 0.3});

  // 控制按钮
  document.getElementById('play-btn').addEventListener('click', () => {
    uiTimeline.play();
  });

  document.getElementById('reset-btn').addEventListener('click', () => {
    uiTimeline.restart();
    uiTimeline.pause();
  });

  // 初始状态
  uiTimeline.pause();
</script>
</body>
</html>